<template>
	<view class="page">
		<headerinfo></headerinfo>
		<view class="title"><el-dropdown @command="fabu_handleCommand">
				<view class="notice" style="margin-right: 30px;">
					发图文
					<i class="el-icon-arrow-down"></i>
				</view>
				<el-dropdown-menu slot="dropdown">
					<el-dropdown-item command="0" v-if="!form.isMylife">我的草稿</el-dropdown-item>
					<el-dropdown-item command="1">发文章</el-dropdown-item>
					<el-dropdown-item command="2">发图文</el-dropdown-item>
					<el-dropdown-item command="3">发视频</el-dropdown-item>
				</el-dropdown-menu>
			</el-dropdown>
			<span>发布图文</span>
			<span class="text-danger" v-if="form.isMylife">(个人生活)</span>
		</view>

		<view class="form">
			<!-- <input class="titleBox" type="text" placeholder="填写标题会有更多赞哦" v-model="form.title"
				placeholder-style="font-size:32rpx" />
				<span class="nextBtn" :class="form.title?'active':''" @click="submit(1)">存草稿</span>
				<span class="nextBtn" :class="form.title?'active':''" @click="submit()">下一步</span> -->
			<view class="flex justify-end mt-2" style="margin-bottom: 20rpx;">
				<span class="nextBtn" :class="form.content?'active':''" @click="submit(1)" v-if="!form.isMylife" >存草稿</span>
				<span class="nextBtn mx-2" :class="(form.content&&form.images&&form.images.length>0)?'active':''"
					@click="submit()">下一步</span>
			</view>
			<textarea placeholder="说点什么吧..." v-model="form.content" class="contentArea" maxlength=-1></textarea>
			<view class="imgList">
				<view class="list nobg" v-for="(item, index) in form.images" :key="index" @click="viewImg(index)">
					<i class="iconfont delImg" @click.stop="delImg(index)">&#xe785;</i>
					<image :src="item" class="fileImg" mode="aspectFill"></image>
				</view>
				<view class="list" @click="chooseImage" v-if="form.images.length < 12">
					<i class="iconfont">&#xe68e;</i>
					<view class="">添加图片</view>
				</view>
				<!-- 占位 -->
				<div class="list zhanwei" v-for="index in 4" :key="index"></div>
			</view>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="btns" :class="form.title && form.images.length>0?'active':''" @click="rightClick">
			下一步
		</view>
		<!-- #endif -->

		<w-compress ref='wCompress' />
	</view>
</template>

<script>
	import WCompress from '@/components/w-compress/w-compress.vue'
	import minxins from '../../common/upload.js';
	export default {
		mixins: [minxins],
		components: {
			WCompress
		},
		data() {
			return {
				bgColor: '#de4849',
				titleStyle: {
					color: '#fff'
				},
				form: {
					categoryId: '',
					content: '',
					familyAttenders: [],
					familyId: uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] : '',
					htmlArticle: false,
					images: [],
					posterUrl: '',
					isDraft: false,
					imagesOri: [],
					location: '',
					title: '',
					contentOri: '',
					videoCoverSeconds: '',
					videos: [],
					privacy: 'all',
					isMylife: ''
				},
				familyMemberId: '',
				familyId: '',
				isFromCaogao: false,
			};
		},
		onLoad(e) {
			if (e && e.data) {
				this.isFromCaogao = true
				this.formDraft = JSON.parse(decodeURIComponent(e.data));
				console.log('formDraft', this.formDraft);
				this.form.isDraftData = true
				this.form.articleId = this.formDraft.docId
				this.form.familyAttenders = []
				this.form.familyIds = []
				this.form.content = this.form.contentOri = this.formDraft.content ? this.formDraft.content : ''
				if (this.formDraft.images) {
					this.form.imagesOri = this.formDraft.images
					this.form.images = [...this.formDraft.images]
				} else {
					this.form.images = []
					this.form.imagesOri = []
				}
				this.form.categoryId = this.formDraft.categoryId ? this.formDraft.categoryId : ''
			}

			if (e.familyId) {
				this.familyId = e.familyId
			}

			if (e.familyMemberId) {
				this.familyMemberId = e.familyMemberId

			}

			if (e.isMylife) {
				this.form.isMylife = e.isMylife
			}
		},
		onShow() {

		},
		onUnload() {},
		mounted() {},
		destroyed() {},
		methods: {
			fabu_handleCommand(e) {
				console.log(e)
				if (e == 0) {
					uni.navigateTo({
						url: `/pages/draft/index`
					})
				} else if (e == 1) {
					let url = '/pages/create/article'
					if (this.form.isMylife) {
						url = url + '?isMylife=1'
					}
					uni.navigateTo({
						url: url
					})
				} else if (e == 2) {
					let url = '/pages/create/picture'
					if (this.form.isMylife) {
						url = url + '?isMylife=1'
					}
					uni.navigateTo({
						url: url
					})
				} else {
					let url = '/pages/create/video'
					if (this.form.isMylife) {
						url = url + '?isMylife=1'
					}
					uni.navigateTo({
						url: url
					})
				}
			},
			submit(type) {
				if (this.form.content == '') {
					return this.$Show.show('说点什么吧')
				}
				if (type == 1) {
					this.form.isDraft = true
					// this.form.articleId = this.form.docId
					console.log('图片草稿保存参数:', this.form);
					this.$api.upsertArticle(this.form).then(res => {
						this.$Show.show('草稿保存成功')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/draft/index'
							})
						}, 1000)
					})
				} else {
					if (this.form.images.length == 0) {
						return this.$Show.show('请上传图片')
					}
					console.log('图片发布参数', this.form)
					let data = encodeURIComponent(JSON.stringify(this.form));

					uni.navigateTo({
						url: `/pages/create/articlenext?data=${data}&familyMemberId=${this.familyMemberId}&familyId=${this.familyId}`
					});
				}
			},
			viewImg(index) {
				uni.previewImage({
					urls: this.form.images,
					current: index
				});
			},
			chooseImage() {
				if (this.form.images.length > 12) {
					return;
				}
				console.log('123')
				uni.chooseImage({
					count: (12 - this.form.images.length),
					success: res => {
						// #ifdef MP-WEIXIN

						this.$refs.wCompress.start(res.tempFilePaths).then(res2 => {
							res2.forEach((item, index) => {
								var fileName = Date.now() + '_' + Math.round(Math.random() *
									100000000) + '.' + item.substring(item.lastIndexOf(
									'.') + 1)

								var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ?
									uni.getStorageSync('maxImageMegBytes') : 20

								var resSize = res.tempFiles[index].size;
								if (resSize > maxImageMegBytes * 1024 * 1024) {
									uni.showToast({
										title: `大小不能超过${maxImageMegBytes}MB`,
										icon: 'none'
									});
									return
								}

								var familyId = uni.getStorageSync('familyId') ? uni
									.getStorageSync('familyId')[0] : ''

								this.uploadUserImage(item, 'image', fileName, familyId, (
									imgUrl) => {
									this.form.images.push(imgUrl);
								})
							})
						})
						// #endif

						// #ifndef MP-WEIXIN
						for (let i = 0; i < res.tempFiles.length; i++) {
						// for (const item of res.tempFiles) {
							var item = res.tempFiles[i]

							// #ifdef APP-PLUS
							var houzui = item.path.substring(item.path.lastIndexOf('.') + 1)
							// #endif

							// #ifdef H5
							var houzui = item.name.substring(item.name.lastIndexOf('.') + 1)
							// #endif

							// var name = Date.now() + '_' + Math.round(Math.random() * 100000000)
							var name = Date.now() + '_' + i

							var path = item.path
							console.log('image item', item);
							var fileName = name + '.' + houzui

							var maxImageMegBytes = uni.getStorageSync('maxImageMegBytes') ? uni.getStorageSync(
								'maxImageMegBytes') : 20

							var resSize = item.size;
							if (resSize > maxImageMegBytes * 1024 * 1024) {
								uni.showToast({
									title: `大小不能超过${maxImageMegBytes}MB`,
									icon: 'none'
								});
								return
							}


							var familyId = uni.getStorageSync('familyId') ? uni.getStorageSync('familyId')[0] :
								''


							// #ifdef APP-PLUS
							uni.compressImage({
								src: path,
								quality: 30,
								compressedWidth: 300,
								success: res => {
									this.uploadUserImage(res.tempFilePath, 'image', fileName,
										familyId, (
											imgUrl) => {
											this.form.images.push(imgUrl);
										})
								}
							})
							// #endif
							// #ifdef H5
							//压缩图片
							// this.getImageInfo(path,fileName).then((result) => {
							// 	console.log('111111111',result.imgSrc,result.fileName,familyId);
							// 	this.uploadUserImage(result.imgSrc, 'image', result.fileName, familyId, (
							// 		imgUrl) => {
							// 		this.form.images.push(imgUrl);
							// 	})
							// })
							
							let maxWidth = 800; // 最大宽度
							let maxHeight = 800; // 最大高度
							let quality = 0.9; // 压缩质量 0.8
							let systemUser = uni.getStorageSync('systemUser') ? uni.getStorageSync('systemUser') : false
							if(systemUser){
								console.log('systemUser',systemUser);
								maxWidth = 1024;
								maxHeight = 1024;
								quality = 1;
							}
							this.getImageInfo2(path,fileName,maxWidth, maxHeight, quality).then((result) => {
								console.log('111111111',result.imgSrc,result.fileName,familyId);
								this.uploadUserImage(result.imgSrc, 'image', result.fileName, familyId, (
									imgUrl) => {
									this.form.images.push(imgUrl);
								})
							})
							
							// const maxWidth = 800; // 最大宽度
							// const maxHeight = 800; // 最大高度
							// const quality = 0.8; // 压缩质量
							// this.compressImageByPath(path, maxWidth, maxHeight, quality).then(result => {
							// 	console.log('111111111',result.imgSrc,result.fileName,familyId);
							// 	this.uploadUserImage(result.imgSrc, 'image', result.fileName, familyId, (
							// 		imgUrl) => {
							// 		console.log('imgUrl',imgUrl);
							// 		this.form.images.push(imgUrl);
							// 	})
							// })
							
							// 不压缩方案，肯定没有多张图片最后采用第一张的问题
							// this.uploadUserImage(path, 'image', fileName, familyId, (
							// 	imgUrl) => {
							// 	this.form.images.push(imgUrl);
							// })
							// #endif
						}

						// #endif


					},
					fail: err => {
						console.log(err)
					}
				});


			},
			delImg(index) {
				this.form.images.splice(index, 1);
			}
		}
	};
</script>

<style lang="scss" scoped>
	.title {
		width: 60%;
		margin: 20px auto;
		font-size: 42rpx;
	}

	.page {
		background-color: #fff;

		.btns {
			width: 700rpx;
			height: 80rpx;
			border-radius: 10rpx;
			color: #fff;
			background-color: #d4d4d4;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 40rpx;
		}

		.active {
			background-color: #de4849;
		}

		.form {
			border-top: 1px solid #f9f9f9;
			padding: 0 30rpx;
			box-sizing: border-box;
			width: 60%;
			margin: 0 auto;
			box-shadow: 0 0 3px #ccc;
			border-radius: 20rpx;
			position: relative;

			.nextBtn {
				padding: 18rpx 34rpx;
				border-radius: 10rpx;
				background-color: #d4d4d4;
				color: #fff;
				font-size: 28rpx;
				cursor: pointer;
				z-index: 9;
			}

			.active {
				background-color: #de4849;
				color: #fff;
			}

			.imgList {
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;

				.list {
					width: 220rpx;
					height: 220rpx;
					display: flex;
					align-items: center;
					background-color: #f8f8f8;
					justify-content: center;
					flex-direction: column;
					border-radius: 5rpx;
					margin-bottom: 20rpx;
					position: relative;

					.delImg {
						font-size: 42rpx;
						position: absolute;
						right: 3px;
						top: 3px;
						color: #fff !important;
						z-index: 10;
					}

					view {
						font-size: 24rpx;
						color: #b7b7b7;
						margin-top: 15rpx;
					}

					.iconfont {
						color: #b7b7b7;
						font-size: 40rpx;
					}

					.fileImg {
						width: 100%;
						height: 100%;
					}
				}

				.nobg {
					background-color: #fff;
				}

				.zhanwei {
					visibility: hidden;
					height: 0;
					margin: 0;
				}
			}

			.titleBox {
				height: 100rpx;
				font-size: 32rpx;
				border-bottom: 1px solid #f8f8f8;
			}

			.contentArea {
				font-size: 30rpx;
				width: 100%;
				height: 300rpx;
				margin-top: 30rpx;
				margin-bottom: 20rpx;
			}
		}
	}
</style>